<template>
	<!-- 订单详情页 -->
	<view>

		<!-- 卡片 -->
		<view class="card-style">
			<view class="top">
				<view class="first u-flex u-row-between">
					<view class="left">
						<text class="left-name">门票订单：</text>
						<text class="left-id">12839218391</text>
					</view>
					<text class="right u-flex">待付款</text>
				</view>
				<view class="second u-flex">
					<view class="left-img">
						<u-image class="image" :src="src" width="150rpx" height="126rpx"></u-image>
					</view>
					<view class="right-con">
						<view>
							<text class="ticket">植物园大门成人票 x3</text>
						</view>
						<view>
							<text class="time">出行日期：2020-10-09</text>
						</view>
						<view>
							<text class="order">下单时间：2020-10-09 12:10:30</text>
						</view>
					</view>
				</view>
				<view class="third u-flex u-row-between">
					<view class="left">
						<text>总计：</text>
						<text class="pirce">￥289</text>
					</view>
					<view class="right u-flex">
						<button>取消订单</button>
						<button class="green">立即支付</button>
					</view>
				</view>
			</view>

		</view>
		<view class="card-style">
			<!-- 使用信息 -->
			<view class="info">
				<view class="info-first u-flex u-row-between">
					<view>
						<text class="title">使用信息</text>
					</view>
					<view>
						<text class="title-right">查看实名制</text>
						<u-icon name="arrow-right" color="#8A8D9A" size="17"></u-icon>
					</view>
				</view>
				<view class="info-second">
					<text>起止时间：</text>
					<text class="time">08:30:00—23:59:00</text>
				</view>
				<view class="info-third">
					<text>门票数量：</text>
					<text class="number">总数量&nbsp;&nbsp;&nbsp;2 </text>
					<text class="number">已使用数量&nbsp;&nbsp;&nbsp;2</text>
					<text class="number">剩余数量&nbsp;&nbsp;&nbsp;1</text>
				</view>
				<view class="wrap">
					<u-swiper :list="list" mode="number"></u-swiper>
				</view>
			</view>
		</view>
		<view class="card-style">
			<!-- 联系人 -->
			<view class="detail">
				<view class="title detail-first">联系人</view>
				<view class="detail-line">姓名：张三</view>
				<view class="detail-line">身份证：2819281928717182</view>
				<view class="detail-line">手机号：18897265129</view>
			</view>
		</view>
		<view class="card-style">
			<!-- 订单信息 -->
			<view class="detail">
				<view class="title detail-first">订单信息</view>
				<view class="detail-line">订单编号：21837127399192</view>
				<view class="detail-line">创建时间：2020-09-09 12:23:56</view>
				<view class="detail-line">付款时间：2020-09-09 12:23:56</view>
				<view class="detail-line">付款方式：微信支付</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				list: [{
						image: 'http://reserve.auroramuseum.cn/imgs/crop/360/213/20201106/0f003ca7-6c42-48a8-8576-d8c300c98cbc.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'http://reserve.auroramuseum.cn/imgs/crop/360/213/20201106/0f003ca7-6c42-48a8-8576-d8c300c98cbc.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'http://reserve.auroramuseum.cn/imgs/crop/360/213/20201106/0f003ca7-6c42-48a8-8576-d8c300c98cbc.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
			}
		},

	};
</script>

<style lang="scss" scoped>
	/* 详情页 */
	.card-style {
		width: 100%;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-bottom: 20rpx solid #f8f8f8;
		// background-color: #FAB6B6;

		&:last-child {
			border-bottom: 0;
		}

		// 门票订单
		.top {

			// 第一行
			.first {
				width: 100%;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				letter-spacing: 1.17rpx;
				margin-bottom: 23rpx;

				.left-name {
					color: #1E2221;
				}

				.left-id {
					color: #353535;
				}

				.right {
					color: #EE8D00;
				}
			}

			//第二行
			.second {
				height: 126rpx;
				margin-bottom: 30rpx;
				//图片
				.left-img {
					margin-right: 20rpx;
				}

				.right-con {
					.ticket {
						font-family: PingFangSC-Medium;
						font-size: 28rpx;
						color: #1E2221;
						letter-spacing: 1.17rpx;
					}

					.time,
					.order {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #838383;
						letter-spacing: 1rpx;
					}

				}
			}

			// 第三行
			.third {
				height: 56rpx;

				.left {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #F02015;
					letter-spacing: 1rpx;

					.pirce {
						font-family: PingFangSC-Medium;
						font-size: 32rpx;
						color: #F02015;
						letter-spacing: 1.34rpx;
						line-height: 33rpx;
						font-weight: 600;
					}
				}

				.right {
					button {
						width: 140rpx;
						height: 56rpx;
						line-height: 56rpx;
						font-family: PingFangSC-Regular;
						font-size: 26rpx;
						color: #838383;
						letter-spacing: 1.09rpx;
						margin-left: 20rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
					}

					uni-button {
						padding: 0;
					}

					.green {
						background: #178975;
						color: #fff;
					}
				}
			}
		}

		// 使用信息
		.info {

			// 第一行
			.info-first {
				margin-bottom: 26rpx;

				.title-right {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #178975;
					letter-spacing: 0.89rpx;
				}
			}

			.info-second {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #1E2221;
				letter-spacing: 1rpx;
				margin-bottom: 10rpx;

				.time {
					color: #353535;
					line-height: 33rpx;
				}
			}

			.info-third {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #1E2221;
				letter-spacing: 1rpx;
				margin-bottom: 47rpx;

				.number {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #353535;
					letter-spacing: 1rpx;
					line-height: 33rpx;
					margin-right: 40rpx;
				}
			}

			.wrap {
				// width: 200rpx;
				// height: 200rpx;
			}
		}

		//标题
		.title {
			font-family: PingFangSC-Medium;
			font-size: 32rpx;
			color: #1E2221;
			letter-spacing: 1.34rpx;
		}

		// 联系人
		.detail {
			.detail-first {
				margin-bottom: 26rpx;
			}

			.detail-line {
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #838383;
				letter-spacing: 1.17rpx;
				margin-bottom: 10rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>
